<template>
    <header class="app-header">
        <div class="avatar-warpper">
            <el-avatar  :size="60" :src="avatar"/>
            <h3 class="title">Backend Management</h3>
        </div>
        <HeaderMeun/>
    </header>
</template>

<script setup lang="ts">
import avatar from '@/assets/images/avatar.jpg'
import HeaderMeun from './HeaderMeun.vue';
</script>

<style lang="less" scoped>
.app-header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    height: 80px;
    padding: 10px 50px;
    background-color: #fff;
    
    .avatar-warpper {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .title {
            margin-left: 20px;
            font-weight: 600;
        }
    }
}
</style>